<#compress>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>高校综合服务平台</title>

	<!-- Global stylesheets -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
	<link href="${base}/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
	<link href="${base}/css/base/minified/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="${base}/css/base/minified/core.min.css" rel="stylesheet" type="text/css">
	<link href="${base}/css/base/minified/components.min.css" rel="stylesheet" type="text/css">
	<link href="${base}/css/base/minified/colors.min.css" rel="stylesheet" type="text/css">
	<!-- /global stylesheets -->

	<!-- Core JS files -->
	<script type="text/javascript" src="${base}/js/plugins/loaders/pace.min.js"></script>
	<script type="text/javascript" src="${base}/js/core/libraries/jquery.min.js"></script>
	<script type="text/javascript" src="${base}/js/core/libraries/bootstrap.min.js"></script>
	<script type="text/javascript" src="${base}/js/plugins/loaders/blockui.min.js"></script>
	<!-- /core JS files -->


	<!-- Theme JS files -->
	<script type="text/javascript" src="${base}/js/core/app.js"></script>
    <script type="text/javascript" src="${base}/js/plugins/buttons/spin.min.js"></script>
    <script type="text/javascript" src="${base}/js/plugins/buttons/ladda.min.js"></script>
	<!-- /theme JS files -->

</head>

<body>

	<!-- Main navbar -->
	<div class="navbar navbar-inverse">
		<div class="navbar-header">
            <a class="navbar-brand" href="javascript:void(0)" style="padding: 0 15px"><img style="height: 36px" src="${base}/images/logo_light.png?t=${.now}" alt=""></a>

			<ul class="nav navbar-nav pull-right visible-xs-block">
				<li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li>
			</ul>
		</div>

		<div class="navbar-collapse collapse" id="navbar-mobile">
			<#--<ul class="nav navbar-nav navbar-right">-->
				<#--<li>-->
					<#--<a href="#">-->
						<#--<i class="icon-display4"></i> <span class="visible-xs-inline-block position-right"> Go to website</span>-->
					<#--</a>-->
				<#--</li>-->

				<#--<li>-->
					<#--<a href="#">-->
						<#--<i class="icon-user-tie"></i> <span class="visible-xs-inline-block position-right"> Contact admin</span>-->
					<#--</a>-->
				<#--</li>-->

				<#--<li class="dropdown">-->
					<#--<a class="dropdown-toggle" data-toggle="dropdown">-->
						<#--<i class="icon-cog3"></i>-->
						<#--<span class="visible-xs-inline-block position-right"> Options</span>-->
					<#--</a>-->
				<#--</li>-->
			<#--</ul>-->
		</div>
	</div>
	<!-- /main navbar -->


	<!-- Page container -->
	<div class="page-container login-container">

		<!-- Page content -->
		<div class="page-content">

			<!-- Main content -->
			<div class="content-wrapper">

				<!-- Simple login form -->
				<form action="${base}/login" method="post" id="login-form">
					<div class="panel panel-body login-form">
						<div class="text-center">
							<div class="icon-object border-slate-300 text-slate-300"><i class="icon-reading"></i></div>
							<h5 class="content-group">登录您的账号 <small class="display-block">请输入账号和密码</small></h5>
						</div>

						<div class="form-group has-feedback has-feedback-left">
							<input type="text" class="form-control" name="username" placeholder="登录账号">
							<div class="form-control-feedback">
								<i class="icon-user text-muted"></i>
							</div>
						</div>

						<div class="form-group has-feedback has-feedback-left">
							<input type="password" class="form-control" name="password" placeholder="登录密码">
							<div class="form-control-feedback">
								<i class="icon-lock2 text-muted"></i>
							</div>
						</div>
						<#if isValidateCodeLogin>
                            <div class="form-group has-feedback has-feedback-left">
                                <input type="text" class="form-control" name="validateCode" placeholder="请输入验证码">
                                <div class="form-control-feedback">
                                    <i class="icon-vcard text-muted"></i>
                                </div>
                                <div id="idcode">
                                    <img style="width: 50%;height: 36px" src="${base}/servlet/validate_code"/>
                                    <a href="javascript:void(0)" onclick="refresh_img_code()">看不清？刷新</a>
                                </div>
                            </div>
						<script>
                            function refresh_img_code() {
								var img=$('#idcode');
                                var wid=img.width()
                                var hig=img.height()
                                var loading=$('<div style="opacity:0.85;background: #333333;text-align:center;color:white;line-height:'+hig+'px;position: absolute;height:'+hig+'px;width:'+wid+'px;left: 0px;top: '+hig+'px">加载中...<i class="icon-spinner3 spinner"></i></div>');
                                $('#idcode').closest('.has-feedback-left').append(loading);
                                setTimeout(function () {
                                    $('#idcode').find('img').attr('src','${base}/servlet/validate_code?_t="'+new Date().getTime());
                                    loading.remove();
                                },3000)
                            }

						</script>
						</#if>


						<div class="form-group">
							<button type="button" onclick="submit_form(this)" class="btn btn-primary btn-block btn-ladda btn-ladda-spinner" data-style="expand-right" data-spinner-color="#333" data-spinner-size="20">登录<i class="icon-circle-right2 position-right"></i></button>
						</div>
						<script>
							$(function () {
								$('input[name=password],input[name=username]').keyup(function (event) {
                                    if(event.keyCode ==13){
                                        submit_form('.btn-ladda-spinner')
                                    }
                                })
                            });
                            function submit_form(btn) {
                                var l = Ladda.create( document.querySelector( '.btn-ladda-spinner' ) );
                                l.start();
                                $(btn).attr('disabled','disabled');
                                $('#login-form').submit();
                            }
						</script>

						<div class="text-center" style="color: red">
						${message}
						</div>
					</div>
				</form>
				<!-- /simple login form -->

			</div>
			<!-- /main content -->

		</div>
		<!-- /page content -->


		<!-- Footer -->
		<#include "plat/footer.ftl"/>
		<!-- /footer -->

	</div>
	<!-- /page container -->

</body>
</html>
</#compress>
